<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods/purCompanyList'}">供货商管理</el-breadcrumb-item>
				<el-breadcrumb-item>供货商品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="goodsContent goodSupply">

			<!--新增  start-->
			<div class="height-search">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_addPurCompanyGoodsData_show"></div>
				</transition>
				<transition name="slideDown">
					<div class="height-s-con" v-show="vue_addPurCompanyGoodsData_show" ref="vue_dom_addModel">

						<div class="public-th clearfix employNum-heard" v-if="vue_row_selectCount2> 0">
							<em @click="vue_row_unselectAll2" class="el-icon-close"></em>
							<span class="selectSpan">已选择<i>{{vue_row_selectCount2}}</i>项</span>
						</div>

						<div class="employNum-heard" v-else>
							<h2 class="slideBtn fl">选择商品</h2>
							<div class="public-left clearfix fl">
								<div class="goods-input"><input @keydown.enter="vue_queryByFullTextFields2" type="text" placeholder="请输入商品名称/商品编码" v-model="basicGoodsQb.fullTextFilterStr" /><i @click="vue_queryByFullTextFields2"></i></div>
							</div>
						</div>

						<!--table表格数据   start-->
						<el-table ref="multipleTable2" :data="basicGoodsData.list" tooltip-effect="dark" :max-height="vue_table_maxHeight2" style="width: 100%;" @selection-change="vue_row_select2">
							<el-table-column type="selection" width="100">
							</el-table-column>
							<el-table-column prop="goodImg" class-name="nonePadding" label-class-name="nonePadding" label="图片" width="80">
								<template scope="scope">
									<el-popover trigger="hover" placement="right-start">
										<img class="hoverImg" :src="basicGoodsData.list[scope.$index].goodsBigPic"/>
										<div slot="reference" class="goodImg-Box">
											<el-tag><img class="goodImg" @click="goToDetails(scope.$index, tableData)" style="z-index: 200;" :src="basicGoodsData.list[scope.$index].goodsBigPic"></el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column prop="goodsCode" label="商品编码" class-name="hidde" width="150" show-overflow-tooltip>
								<template scope="scope"><span class="goTo" @click="goToDetails(scope.$index, tableData)">{{ scope.row.goodsCode}}</span></template>
							</el-table-column>
							<el-table-column prop="goodsName" label="商品名称" class-name="hidde" width="400" show-overflow-tooltip>
								<template scope="scope"><span class="goTo" @click="goToDetails(scope.$index, tableData)">{{ scope.row.goodsName}}</span></template>
							</el-table-column>
							<el-table-column prop="goodsSkuValue" label="商品规格" show-overflow-tooltip class-name="hidde" min-width="400">
							</el-table-column>
						</el-table>
						<!--table表格数据   end-->
						<!--分页  start-->
						<div class="block">
							<el-pagination
								@size-change="page_onPageSizeChange1"
								@current-change="page_onCurPageChange1"
								:current-page="parseInt(basicGoodsData.pageTools.pageNo)"
								:page-sizes="basicGoodsData.pageTools.pageSizeOptions"
								:page-size="parseInt(basicGoodsData.pageTools.pageSize)"
								:total="parseInt(basicGoodsData.pageTools.recordCount)"
								layout="total, prev, pager, next, sizes,jumper">
							</el-pagination>
						</div>
						<!--分页  end-->


						<div class="" style="clear: both;">
							<el-form ref="Form" label-width="80px">
								<el-form-item label-width="15px">
									<el-button @click="vue_companyGoods_addOk" type="primary">确定</el-button>
									<el-button @click="vue_companyGoods_addCancel">取消</el-button>
								</el-form-item>
							</el-form>
						</div>

					</div>
				</transition>
			</div>
			<!--新增  end-->




















			<!--头部  start-->
			<div class="supply-top">
				<em class="iconfont">&#xe848;</em><span style="font-size:16px">{{purCompanyData.companyName}}</span>
				<em class="iconfont fenge">&#xe66d;</em>
				<span>{{purCompanyData.companyContactName}}</span> &nbsp;
				<span>{{purCompanyData.companyContactPhone}}</span>
			</div>
			<div class="public-th clearfix employNum-heard" v-if="vue_row_selectCount1>0">
				<em @click="vue_row_unselectAll1" class="el-icon-close"></em>
				<span class="selectSpan">已选择<i>{{vue_row_selectCount1}}</i>项</span>
				<b class="selectB">|</b>
				<span class="selectSpan" @click='vue_batchApply'><em class="iconfont">&#xe63a;</em>取消关联选中的商品</span>
			</div>
			<div class="employNum-heard" v-else>
				<div class="public-left clearfix fl">
					<div class="goods-input"><input @keydown.enter="vue_queryByFullTextFields1" type="text" placeholder="请输入商品名称/商品编码" v-model="purCompanyGoodsQb.fullTextFields" /><i @click="vue_queryByFullTextFields1"></i></div>
				</div>
				<el-button class="fr" type="primary" @click="vFun_addPurCompany_addBtn" style="margin-left: 10px">新增</el-button>
			</div>
			<!--头部  end-->
			<!--table表格数据   start-->
			<el-table ref="multipleTable" :data="purCompanyGoodsData.list" tooltip-effect="dark" :max-height="vue_table_maxHeight1" style="width: 100%;" @selection-change="vue_row_select1">
				<el-table-column type="selection" width="100">
				</el-table-column>
				<el-table-column prop="goodImg" class-name="nonePadding" label-class-name="nonePadding" label="图片" width="80">
					<template scope="scope">
						<el-popover trigger="hover" placement="right-start">
							<img class="hoverImg" :src="purCompanyGoodsData.list[scope.$index].goodsBigPic" />
							<div slot="reference" class="goodImg-Box">
								<el-tag><img class="goodImg" @click="goToDetails(scope.$index, tableData)" style="z-index: 200;" :src="purCompanyGoodsData.list[scope.$index].goodsBigPic"></el-tag>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="companyGoodsCode" label="商品编码" class-name="hidde" width="150" show-overflow-tooltip>
					<template scope="scope"><span class="goTo" @click="goToDetails(scope.$index, tableData)">{{ scope.row.companyGoodsCode}}</span></template>
				</el-table-column>
				<el-table-column prop="goodsName" label="商品名称" class-name="hidde" width="400" show-overflow-tooltip>
					<template scope="scope"><span class="goTo" @click="goToDetails(scope.$index, tableData)">{{ scope.row.goodsName}}</span></template>
				</el-table-column>
				<el-table-column prop="goodsSkuValue" label="商品规格" show-overflow-tooltip class-name="hidde" width="400">
				</el-table-column>
				<el-table-column prop="goodsSupplyPrice" label="供应价" class-name="hidde" min-width="150">
					<template scope="scope">
						<input class="goodInput" @keydown="vue_rowInput_numberStop($event)" @blur="vue_updatePrice(scope.row)" v-model="scope.row.goodsSupplyPrice">
					</template>
				</el-table-column>
			</el-table>
			<!--table表格数据   end-->
			<!--分页  start-->
			<div class="block">
				<el-pagination
					@size-change="page_onPageSizeChange"
					@current-change="page_onCurPageChange"
					:current-page="parseInt(purCompanyGoodsData.pageTools.pageNo)"
					:page-sizes="purCompanyGoodsData.pageTools.pageSizeOptions"
					:page-size="parseInt(purCompanyGoodsData.pageTools.pageSize)"
					:total="parseInt(purCompanyGoodsData.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
			<!--分页  end-->
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			return {
				/* start table */
				vue_addPurCompanyGoodsData_show:false,  //新增供应商供应商品页面是否显示
				vue_table_maxHeight1:390,  //供应商供应商品的table高度
				vue_table_maxHeight2:390,  //供应商供应商品的table高度
				vue_row_selectCount1:0,  //供应商供应商品的选择的row数
				vue_row_selectCount2:0,  //供应商品的选择的row数
				vue_row_companyGoodsCodeStr1:"",  //供应商供应商品的选中的row
				vue_row_companyGoodsCodeStr2:[],  //供应商品的选中的row
				/* end table */
				purCompanyData:{  //供应商信息
					companyName:"",
					companyContactName:"",
					companyContactPhone:"",
				},
				purCompanyGoodsData:{  //供应商供货商品
					list:[],
					pageTools:{},
				},
				basicGoodsData:{  //所有供货商品
					list:[],
					pageTools:{},
				},
				purCompanyGoodsQb:{  //查询用数据1
					companyCode:localStorage.getItem("companyCode"),
					fullTextFields:"",
				},
				basicGoodsQb:{  //查询用数据2
					fullTextFilterStr:"",
				},
			}
		},
		methods: {
			vFun_addPurCompany_addBtn(){  //查询供应商可供应商品
				this.vue_addPurCompanyGoodsData_show=true;  //显示供应商可供应商品
				this.query_basicGoodsData();  //查询供应商可供应商品
			},
			query_purCompanyData(){  //获取供应商信息
				this.axios({
					method:"GET",
					url:"/v3/pur/companys/"+localStorage.getItem('companyCode')
				}).then((res)=>{
					for(var i in this.purCompanyData){
						this.purCompanyData[i]=res.data[i];
					};
				}).catch((err)=>{

				})
			},
			query_purCompanyGoodsData(){  //获取供应商供应商品
				this.axios({
					method:"POST",
					url:"/v3/pur/companyGoodss/list",
					data:{
						"offset":(this.purCompanyGoodsData.pageTools.pageNo-1)*this.purCompanyGoodsData.pageTools.pageSize,
						"limit":this.purCompanyGoodsData.pageTools.pageSize,
						"companyCode":this.purCompanyGoodsQb.companyCode,
						"fullTextFilterStr":this.purCompanyGoodsQb.fullTextFields,
					}
				}).then((res)=>{
					this.purCompanyGoodsData.list=res.data.list;
					this.purCompanyGoodsData.list.forEach((item,index,arr)=>{
						if(item.goodsSupplyPrice==null){
							item.goodsSupplyPrice=0;
						};
					});
					this.purCompanyGoodsData.pageTools=res.data.pageTools;
					this.purCompanyGoodsData.pageTools.pageSizeOptions=[10,20,30]
////////////////					this.purCompanyGoodsData.pageTools.pageSizeOptions=this.purCompanyGoodsData.pageTools.pageSizeOptions.split(",");
//					this.purCompanyGoodsData.pageTools.pageSizeOptions.forEach((item)=>{
//						item=item*1;
//						console.log(typeof item)
//					})
				}).catch((err)=>{

				})
			},
			query_basicGoodsData(){  //获取供应商品
				this.axios({
					method:"POST",
					url:"/v3/basic/goodss/"+ localStorage.getItem('companyCode') +"/queryPageByCompany",
					data:{
						"offset":(this.basicGoodsData.pageTools.pageNo-1)*this.basicGoodsData.pageTools.pageSize,
						"limit":this.basicGoodsData.pageTools.pageSize,
						"fullTextFilterStr":this.basicGoodsQb.fullTextFilterStr,
					}
				}).then((res)=>{
					this.basicGoodsData.list = res.data.list;
					this.basicGoodsData.pageTools = res.data.pageTools;
					this.basicGoodsData.pageTools.pageSizeOptions=[10,20,30]
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			vue_rowInput_numberStop(e){  //通过阻止默认事件来限制用户只能输入数字
				if(!((e.keyCode>=48&&e.keyCode<=57)||(e.keyCode>=96&&e.keyCode<=105)||(e.keyCode==46)||(e.keyCode==39)||(e.keyCode==9)||(e.keyCode==8)||(e.keyCode==116)||(e.keyCode==13)||(e.keyCode==110)||(e.keyCode==190)))e.preventDefault();
			},
			vue_row_select1(val){  //供应商供应商品选择表格的项
				this.vue_row_selectCount1=val.length;
				this.vue_row_companyGoodsCodeStr1="";
				val.forEach((item,index,arr)=>{
					this.vue_row_companyGoodsCodeStr1+=item.companyGoodsCode+",";
				})
			},
			vue_row_select2(val){  //供应商品选择表格的项
				this.vue_row_selectCount2=val.length;
				this.vue_row_companyGoodsCodeStr2=[];
				val.forEach((item,index,arr)=>{
					this.vue_row_companyGoodsCodeStr2.push({
						"goodsSkuCode":item.goodsSkuCode,
					});
				})

			},
			vue_row_unselectAll1() {  //供应商供应商品的取消选择row
				this.$refs.multipleTable.clearSelection();
				this.vue_row_companyGoodsCodeStr1="";
			},
			vue_row_unselectAll2() {  //供应商品的取消选择row
				this.$refs.multipleTable2.clearSelection();
				this.vue_row_companyGoodsCodeStr2=[];
			},
			vue_batchApply() {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
							style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'
						}, '确认是否将选中商品与供应商取消关联？'),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr',
					confirmButtonClass: 'fr',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'DELETE',
							url: "/v3/pur/companyGoodss/"+this.vue_row_companyGoodsCodeStr1
						}).then((res) => {
							this.Public.openSuccess(this,"操作成功！");
							this.purCompanyGoodsData.pageTools.pageNo = 1;
							this.query_purCompanyGoodsData();
						}).catch((err)=>{
							this.Public.openError(this,err.response.data)
						});
					}
				});
			},
			vue_queryByFullTextFields1(){  //供应商供应商品搜索查询
				this.purCompanyGoodsData.pageTools.pageNo = 1;
				this.query_purCompanyGoodsData();
			},
			vue_queryByFullTextFields2(){  //供应商品搜索查询
				this.basicGoodsData.pageTools.pageNo = 1;
				this.query_basicGoodsData();
			},
			page_onPageSizeChange(val) {  //供应商供应商品分页选项
				this.purCompanyGoodsData.pageTools.pageSize = val;
				this.query_purCompanyGoodsData();
			},
			page_onPageSizeChange1(val) {  //供应商品分页选项
				this.basicGoodsData.pageTools.pageSize = val;
				this.query_basicGoodsData();
			},
			page_onCurPageChange(val) {  //供应商供应商品分页选当前页
				this.purCompanyGoodsData.pageTools.pageNo = val;
				this.query_purCompanyGoodsData();
			},
			page_onCurPageChange1(val) {  //供应商供应商品分页选当前页
				this.basicGoodsData.pageTools.pageNo = val;
				this.query_basicGoodsData();
			},
			vue_companyGoods_addOk(){  //新增供应商供应商品ok
				this.axios({
					method:"POST",
					url:"/v3/pur/companyGoodss/"+this.purCompanyGoodsQb.companyCode,
					data:{
						"basicGoodsStr":JSON.stringify(this.vue_row_companyGoodsCodeStr2),
					}
				}).then((res)=>{
					this.vue_addPurCompanyGoodsData_show=false;
					this.vue_row_companyGoodsCodeStr2=[];
					this.$refs.multipleTable2.clearSelection();
					this.Public.openSuccess(this,"操作成功！");
					this.purCompanyGoodsData.pageTools.pageNo = 1;
					this.query_purCompanyGoodsData();
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				})
			},
			vue_companyGoods_addCancel(){  //新增供应商供应商品cancel
				this.vue_addPurCompanyGoodsData_show=false;
				this.$refs.multipleTable2.clearSelection();
				this.vue_row_companyGoodsCodeStr2 = [];
			},
			vue_updatePrice(val){  //修改价格
				val.goodsSupplyPrice=isNaN(parseFloat(val.goodsSupplyPrice))?0:parseFloat(val.goodsSupplyPrice);
				this.axios({
					method:"PUT",
					url:"/v3/pur/companyGoodss/"+val.companyGoodsCode,
					data:{
						"goodsSkuCode":val.goodsSkuCode,
						"companyCode":this.purCompanyGoodsQb.companyCode,
						"goodsSupplyPrice":val.goodsSupplyPrice,
					}
				}).then((res)=>{
					this.Public.openSuccess(this,"操作成功！");
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				});
			},
		},
		created() {
			this.purCompanyGoodsData.pageTools = this.$store.state.page;  //初始化供应商的供应商品pageTools
			this.basicGoodsData.pageTools = this.$store.state.page;  //初始化供应商的供应商品pageTools
			this.query_purCompanyData();  //获取供应商信息
			this.query_purCompanyGoodsData();  //获取供应商的供应商品
		},
		mounted() {
			this.vue_table_maxHeight1 = document.documentElement.clientHeight-303;
			this.vue_table_maxHeight2 = document.documentElement.clientHeight-258;
			this.$refs['vue_dom_addModel'].style.height = document.documentElement.clientHeight-100 +'px';

			document.querySelector(".goodsContent").style.height = (document.documentElement.clientHeight - 180) + 'px';
		}
	}
</script>

<style scoped>
	.goodImg:hover {
		cursor: pointer;
	}

	.hoverImg {
		width: 190px;
		height: 190px;
		margin: 15px;
		background: white;
		z-index: 23;
	}

	.goTo:hover {
		color: #13c19f;
		cursor: pointer;
	}
	/* start 部门下拉的样式 */

	.departmentSelectDiv {
		position: relative;
		width: 100%;
		height: 36px;
		line-height: 36px;
	}

	.departmentSelectDiv>span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 36px;
		border: 1px solid rgb(191, 212, 217);
		border-radius: 4px;
		font-size: 12px;
		padding-left: 10px;
		cursor: pointer;
	}

	.departmentSelectDiv>span:hover {
		border-color: rgb(131, 156, 165);
	}

	.departmentSelectDiv>span:active {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>span:visited {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>span:focus {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>i {
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		color: rgb(191, 212, 217);
		transition: .3s;
		font-size: 12px;
	}

	.departmentSelectDiv>i.up {
		transform: rotate(180deg);
	}

	.departmentTree {
		position: absolute;
		width: 100%;
		top: 42px;
		left: 0;
		border-radius: 2px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		z-index: 2;
		font-size: 12px;
		overflow-y: auto;
		height: 200px;
	}

	.selectSlide-enter-active,
	.selectSlide-leave-active {
		transition: .4s;
	}

	.selectSlide-enter,
	.selectSlide-leave-active {
		height: 0;
		opacity: 0;
	}
	/* end 部门下拉的样式 */

	.el-form {
		overflow: hidden;
	}

	.el-form .el-form-item:last-child {
		width: 100%;
	}

	.el-form-item {
		width: 485px;
		float: left;
		margin-right: 10px;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
		margin-bottom: 20px;
	}

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
	}

	.height-s-con {
		position: absolute;
		width: 100%;
		/* height: 380px;*/
		top: 0;
		left: 0;
		padding: 20px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
		overflow: hidden;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}

	.selectSpan {
		display: block;
		float: left;
		line-height: 37px;
		color: #7b8aa1;
		padding-right: 24px;
	}

	.selectSpan:hover {
		cursor: pointer;
		color: #13c19f;
	}

	.selectSpan em {
		display: inline-block;
		vertical-align: middle;
		margin-top: -3px;
		margin-right: 3px;
	}

	.selectSpan i {
		color: #13c19f;
		margin: 0px 6px;
	}

	.selectB {
		float: left;
		line-height: 37px;
		display: block;
		margin: 0px 30px;
		color: #7b8aa1;
	}

	.el-icon-close {
		font-size: 12px !important;
		display: block;
		float: left;
		line-height: 37px;
		color: #7b8aa1;
		margin-right: 20px;
	}

	.el-icon-close:hover {
		cursor: pointer;
		color: #13c19f;
	}

	.block {
		float: right;
		margin-top: 10px;
	}

	.el-table {
		font-size: 12px;
	}

	p.kael {
		width: 1000px;
		color: red;
	}

	.p {
		text-indent: 10px;
		line-height: 30px;
		cursor: pointer;
	}

	.p em {
		position: relative;
		top: 0px;
		margin-right: 3px;
	}

	.p:hover {
		cursor: pointer;
		background: #eef1f9;
		color: #03B8CC;
	}

	.goodImg {
		width: 40px;
		height: 40px;
		margin: 8px 6px 8px 4px;
	}

	.high_search {
		line-height: 36px;
		color: #93a6b7;
		margin-left: 20px;
		cursor: pointer;
	}

	.high_search:hover {
		color: #13C19F;
	}

	.goods-input i {
		background: url(../../../img/sousuo.png) no-repeat;
		height: 20px;
		width: 20px;
		display: inline-block;
		position: relative;
		top: 5px;
		right: 5px;
		cursor: pointer;
	}

	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}

	.goods-input {
		float: left;
		width: 340px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		margin-right: 10px;
		height: 34px;
		cursor: pointer;
	}

	.goods-input input {
		display: block;
		float: left;
		width: 290px;
		height: 32px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}

	.slideBtn {
		line-height: 36px;
		margin-right: 26px;
	}

	.slideBtn div span {
		cursor: pointer;
		display: block;
	}

	.slideBtn div {
		font-size: 12px;
	}

	.slideBtnIcon {
		transition: .4s;
	}

	.slideBtnIcon.up {
		transform: rotate(-180deg);
	}

	.employNum-heard {
		height:34px;
		padding-top: 0px;
		overflow: hidden;
		margin-bottom: 10px;
		padding-left: 16px;
	}

	* {
		transition: .2s;
		box-sizing: border-box;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
		padding: 3px 0 15px 0;
	}

	div.goodsContent {
		position: relative;
		flex: 1;
		width: 100%;
		background-color: #fff;
		padding: 0 20px 20px 20px;
		margin-top: 15px;
	}
	/* start 商品分类下拉的样式 */

	.departmentSelectDiv {
		position: relative;
		width: 100%;
		height: 36px;
		line-height: 36px;
	}

	.departmentSelectDiv>span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 36px;
		border: 1px solid rgb(191, 212, 217);
		border-radius: 4px;
		font-size: 12px;
		padding-left: 10px;
		cursor: pointer;
	}

	.departmentSelectDiv>span:hover {
		border-color: rgb(131, 156, 165);
	}

	.departmentSelectDiv>span:active {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>span:visited {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>span:focus {
		border-color: #03b8cc;
	}

	.departmentSelectDiv>i {
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		height: 36px;
		line-height: 38px;
		text-align: center;
		color: rgb(191, 212, 217);
		transition: .3s;
		font-size: 12px;
	}

	.departmentSelectDiv>i.up {
		transform: rotate(180deg);
	}

	.departmentTree {
		position: absolute;
		width: 100%;
		top: 42px;
		left: 0;
		border-radius: 2px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		z-index: 2;
		font-size: 12px;
		overflow-y: auto;
		height: 200px;
	}

	.selectSlide-enter-active,
	.selectSlide-leave-active {
		transition: .4s;
	}

	.selectSlide-enter,
	.selectSlide-leave-active {
		height: 0;
		opacity: 0;
	}
	/* end 商品分类下拉的样式 */

	* {
		box-sizing: border-box;
		transition: .2s;
	}

	.piliangCao {
		margin-left: -6px;
		height: 45px;
		line-height: 36px;
	}

	.piliangCao em {
		font-size: 14px;
	}

	.piliangCao a {
		cursor: pointer;
		color: #768696;
		margin-right: 20px;
	}

	.piliangCao a:hover {
		color: #03B8CC;
	}

	.goodInput {
		width: 100px;
		height: 32px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 10px;
	}

	.supply-top {
		height: 65px;
		line-height: 62px;
		border-bottom: 1px solid #ececec;
		margin-bottom: 12px;
	}

	.supply-top .fenge {
		font-size: 12px;
		margin: 0 15px;
		color: #ececec;
	}

	.slideBtn {
		font-weight: normal;
	}
</style>
